<template>
  <div class="index">
    <van-sticky>
      <div class="top">
        <div class="title">后日头条</div>
        <i class="iconfont right" @click="search">&#xe7b5;</i>
      </div>
      <div class="content">
        <div class="bg">
          <div class="position">
            <van-tag
              class="tag"
              v-for="(item, index) in taglist"
              :class="{ avtive: tagclass === index }"
              :key="index"
              @click="tagclick(item.id, index)"
              color="#ffffff"
              text-color="#cccccc"
              >{{ item.name }}</van-tag
            >
          </div>
          <i class="iconfont" @click="showtrue">&#xe748;</i>
        </div>
      </div>
    </van-sticky>
    <div class="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="已经到底了"
          @load="onLoad"
        >
          <articlesitm
            v-for="(item, index) in list"
            :key="index"
            :uase="item"
            @closemain="closemain(item, index)"
          ></articlesitm>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-popup
      class="feedback"
      v-model="showtwo"
      :style="{ width: '80%' }"
      round
    >
      <van-cell-group v-if="feedback">
        <van-cell
          class="feedback-item"
          title="不感兴趣"
          @click="dislike"
        ></van-cell>
        <van-cell
          class="feedback-item"
          title="反馈垃圾内容"
          is-link
          @click="reports"
        ></van-cell>
        <van-cell
          class="feedback-item"
          title="拉黑作者"
          @click="blacklists"
        ></van-cell>
      </van-cell-group>
      <van-cell-group v-if="!feedback">
        <van-nav-bar left-arrow @click-left="onClickLeft" />
        <van-cell
          v-for="(item, index) in typelist"
          :key="index"
          :value="item"
          @click="article(index)"
        />
      </van-cell-group>
    </van-popup>
    <van-popup v-model="show" position="bottom" :style="{ height: '80%' }">
      <div class="uptext">
        <span class="uptitle">我的频道</span
        ><span class="edit" v-if="isedit" @click="isedit = false">编辑</span
        ><span class="edit" v-if="!isedit" @click="finish">完成</span>
      </div>
      <van-row class="row">
        <van-col
          class="col"
          span="6"
          v-for="(item, index) in taglist"
          :key="index"
          :class="{ red: tagclass === index }"
          @click="tagclick(item.id, index)"
          >{{ item.name }}
          <van-icon
            class="icon"
            v-if="!isedit && index !== 0"
            name="cross"
            color="#323233"
            size="12"
        /></van-col>
      </van-row>
      <div class="uptext">
        <span class="uptitle">推荐频道</span>
      </div>
      <van-row class="row">
        <van-col
          class="col"
          span="6"
          v-for="(item, index) in channelslist"
          :key="index"
          @click="split(index)"
          >{{ item.name }}</van-col
        >
      </van-row>
    </van-popup>
  </div>
</template>

<script>
import articlesitm from './articlesitm.vue'
import { Toast } from 'vant'
import {
  Userarticles,
  Userchannels,
  Channels,
  Articledislikes,
  goBlackLists,
  Articlereports
} from '@/api/index.js'
export default {
  components: { articlesitm },
  name: 'Index',
  data () {
    return {
      list: [],
      taglist: [],
      tagclass: 0,
      channel_id: 0,
      isLoading: false,
      loading: false,
      finished: false,
      show: false,
      showtwo: false,
      isedit: true,
      feedback: true,
      // 全部频道
      channelslist: [],
      // 要操作的文章ID
      isid: '',
      index: '',
      // 要拉黑的用户ID
      aut_id: '',
      // 反馈类型
      typelist: [
        '其他问题',
        '标题夸张',
        '低俗色情',
        '错别字多',
        '旧闻重复',
        '广告软文',
        '内容不实',
        '涉嫌违法犯罪',
        '侵权'
      ]
    }
  },
  methods: {
    // 反馈内容
    async article (index) {
      const res = await Articlereports({
        target: this.isid,
        type: index
      })
      console.log(res)
      this.showtwo = false
    },
    onClickLeft () {
      this.feedback = true
    },
    reports () {
      this.feedback = false
    },
    // 拉黑作者
    async blacklists () {
      const res = await goBlackLists({
        target: this.aut_id
      })
      console.log(res)
      this.showtwo = false
      this.list.splice(this.index, 1)
    },
    // 不喜欢文章
    async dislike () {
      const res = await Articledislikes({
        target: this.isid
      })
      console.log(res)
      this.showtwo = false
      this.list.splice(this.index, 1)
    },
    // 要操作的文章ID
    closemain (item, index) {
      this.showtwo = true
      this.feedback = true
      this.isid = item.art_id
      this.index = index
      this.aut_id = item.aut_id
      // console.log(index)
      // console.log(item)
    },
    finish () {
      this.isedit = true
      this.show = false
    },
    split (index) {
      if (!this.isedit) {
        this.taglist.push(...this.channelslist.splice(index, 1))
      }
      // console.log(...this.channelslist.splice(index, 1))
      // console.log(this.taglist)
    },
    // 跳转搜索页面
    search () {
      this.$router.push('/home/search')
    },
    // 点击标签
    tagclick (id, index) {
      if (!this.isedit) {
        if (index === 0) {
          return
        }
        if (this.tagclass === index) {
          this.tagclass = 0
          this.channel_id = 0
          this.listme()
        }
        this.channelslist.push(...this.taglist.splice(index, 1))
        return
      }
      if (this.channel_id === id) {
        return
      }
      this.tagclass = index
      this.channel_id = id
      this.listme()
    },
    // 封装新闻列表函数
    async listme () {
      const res = await Userarticles({
        channel_id: this.channel_id,
        timestamp: Date.parse(new Date()),
        with_top: 0
      })
      // console.log('res', res)
      this.list = res.data.results
    },
    // 上拉刷新
    onRefresh () {
      Toast('刷新成功')
      this.isLoading = false
      this.listme()
    },
    // 下拉加载
    async onLoad () {
      const res = await Userarticles({
        channel_id: this.channel_id,
        timestamp: Date.parse(new Date()),
        with_top: 0
      })
      this.list.push(...res.data.results)
      //  console.log(res)
      //  console.log(this.list)
      this.loading = false
      if (this.list.length >= res.data.page) {
        this.finished = true
      }
    },
    showtrue () {
      this.show = true
    }
  },
  // 页面创建完成发送请求获取数据
  async created () {
    this.listme()
    const red = await Userchannels()
    // console.log(red)
    this.taglist = red.data.channels
    const res = await Channels()
    // console.log(res)
    this.channelslist = res.data.channels
    this.taglist.forEach(item => {
      for (let i = 0; i < this.channelslist.length; i++) {
        if (item.id === this.channelslist[i].id) {
          this.channelslist.splice(i, 1)
        }
      }
    })
  },
  activated () {
    window.scrollTo(0, 0)
  }
}

</script>

<style lang="less" scoped>
.index {
  .top {
    padding-top: 10px;
    text-align: center;
    height: 45px;
    background: @color-bg;
    position: relative;
    .title {
      font-size: 18px;
      color: @color-white;
    }
    .right {
      text-align: right;
      font-size: 24px;
      position: absolute;
      right: 10px;
      top: 6px;
      color: @color-white;
    }
  }
  .content {
    padding: 0px 15px;
    position: relative;
    .bg {
      padding: 6px 0;
      background-color: #ffffff;
    }
    .iconfont {
      position: absolute;
      right: 5px;
      top: 5px;
      font-size: 30px;
      color: black;
    }
    .position {
      overflow: auto;
      display: flex;
      align-items: center;
      margin-right: 18px;
      .tag {
        flex: 0 0 auto;
        height: 30px;
        font-size: 16px;
        margin-right: 6px;
        line-height: 30px;
      }
      .avtive {
        color: black !important;
      }
    }
  }
  .uptext {
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .uptitle {
      font-size: 14px;
    }
    .edit {
      font-size: 13px;
      padding: 5px 15px;
      color: red;
      border: 1px solid red;
      border-radius: 15px;
    }
  }
  .row {
    .col {
      font-size: 15px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border: 1px solid #f8f9fa;
      position: relative;
      .icon {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    .red {
      color: red;
    }
  }
}
</style>
